<template>
<div class="hotList">
  <div class="lunbo">
    <v-swiper></v-swiper>
  </div>
  <div class="list">
    <v-list title="最近上映" :Data="hotData" :isHome="true" link="/hot"></v-list>
  </div>
  <div class="list">
    <v-list title="电影" :Data="movieData" :isHome="true" link="/movie"></v-list>
  </div>
  <div class="list">
    <v-list title="连续剧" :Data="tvData" :isHome="true" link="/tv"></v-list>
  </div>
  <div class="list">
    <v-list title="动漫" :Data="animeData" :isHome="true" link="/anime"></v-list>
  </div>
  <div class="loading" v-if="isLoading">
  <van-loading size="50px" type="spinner" />
</div>
</div>

</template>

<script>
import VSwiper from '../components/Swriper.vue'
import VList from '../components/List.vue'
import {onMounted, reactive, toRefs} from 'vue'
import axios from 'axios'
export default {
  components:{
    "v-swiper":VSwiper,
    "v-list":VList
  },
  setup(){
    const state = reactive({
      hotData:[
        {
          src:'https://pic.monidai.com/img/c40241fe8e29ee48195fd4893d767421.jpg',
          name:'极道宗师第二季',
          desc:'更新至第四集'
        },
        {
          src:'https://pic.monidai.com/img/c40241fe8e29ee48195fd4893d767421.jpg',
          name:'极道宗师第二季',
          desc:'更新至第四集'
        },
        {
          src:'https://pic.monidai.com/img/c40241fe8e29ee48195fd4893d767421.jpg',
          name:'极道宗师第二季',
          desc:'更新至第四集'
        },
        {
          src:'https://pic.monidai.com/img/c40241fe8e29ee48195fd4893d767421.jpg',
          name:'极道宗师第二季',
          desc:'更新至第四集'
        },
        {
          src:'https://pic.monidai.com/img/c40241fe8e29ee48195fd4893d767421.jpg',
          name:'极道宗师第二季',
          desc:'更新至第四集'
        },
        {
          src:'https://pic.monidai.com/img/c40241fe8e29ee48195fd4893d767421.jpg',
          name:'极道宗师第二季',
          desc:'更新至第四集'
        },
        {
          src:'https://pic.monidai.com/img/c40241fe8e29ee48195fd4893d767421.jpg',
          name:'极道宗师第二季',
          desc:'更新至第四集'
        },
        {
          src:'https://pic.monidai.com/img/c40241fe8e29ee48195fd4893d767421.jpg',
          name:'极道宗师第二季',
          desc:'更新至第四集'
        },
        {
          src:'https://pic.monidai.com/img/c40241fe8e29ee48195fd4893d767421.jpg',
          name:'极道宗师第二季',
          desc:'更新至第四集'
        }
      ],
      movieData:[],
      tvData:[],
      animeData:[],
      isLoading:true
    })
    onMounted(()=>{
      axios.get('/api/indexlist').then(res=>{
        state.hotData = res.data.slice(0,9)
        state.movieData = res.data.slice(9,18)
        state.tvData = res.data.slice(18,27)
        state.animeData = res.data.slice(27,36)
        state.isLoading = false
        console.log(res.data);
      })
    })
    return {
      ...toRefs(state)
    }
  }
}
</script>
<style lang="less" scoped>
.hotList{
  background: #222;
  .lunbo{
    height: auto;
    padding-top: 20px;
    padding-bottom: 10px;
  }
  .list{
    padding-bottom: 35px;
  }
  .loading{
    position: fixed;
    top: calc(50vh - 25px);
    left: calc(50vw - 25px);
  }
}
</style>
